<template>
  <div>
    <div class="tag-box" @click="handleClick">
      <p v-if="!isHot" >{{item.tag}}</p>
      <div v-if="isHot">{{item.tag}}（{{item.referenceCount}}）</div>
      <yun-icon v-if="item.childList" :style="{paddingRight:'5px',transform:showChildList?'rotate(180deg)':'rotate(0)'}" name="down_arrow" size="8px" :color="showChildList?'#00AAE6':'#999'"></yun-icon>
    </div>
    <div  v-if="item.childList&&showChildList" >
      <p class="tag-child" @click="handleChildClick(val.tag,val.tagId)" v-for="(val,index) in item.childList">{{val.tag}}</p>
    </div>
  </div>

</template>

<script>
export default {
  name: "selectContent",
  props: {
    itemIndex:Number,
    item: Object,
    index: Number,
    isHot: {
      type: Boolean,
      default: false
    }
  },

  watch:{
  },
  data(){
    return{
      showChildList:false
    }
  },
  methods: {
    handleClick(){
      if(this.item.childList){

        if(this.showChildList){
          this.showChildList = !this.showChildList;
          this.$emit('scrollTop',this.item.childList.length,this.itemIndex)
        }else{
          this.showChildList = !this.showChildList;
        }
      }else {
        this.$emit('select', this.item.tag, this.item.tagId);

      }
    },
    handleChildClick(tag,id){
      this.$emit('select',this.item.tag+'>'+ tag, id);

    }
  }
}
</script>

<style lang="scss" scoped>
  .tag-box{
    @extend %flex-row-spb;
    border-bottom: 1px solid #F4F8FA;
    box-sizing: border-box;
    padding-right: 10px;

    > div {
      display: inline-block;
      margin: 2*$length 5*$length 8*$length 8*$length;
      padding: 2*$length 9*$length;
      @extend %cursorPointer;
      @include border-radius(2*$length);
      background-color: #F4F8FA;
      @include fontStyle(12, 22, 500, #999, center);
    }
    > p {
      width: 275*$length;
      @include fontStyle(14, 40, 500, #999, left);
      padding-left: 20*$length;
      @extend %cursorPointer;

    }
    &:hover {
      background-color: #F4F8FA;
      > p{
        color: #00AAE6;

      }
    }

  }

  .tag-child {
    @include fontStyle(12, 40, 500, #999, center);
    @extend %cursorPointer;
    box-sizing: border-box;
    &:hover {
      background-color: #F4F8FA;
        color: #00AAE6;
    }
  }

</style>
